<template>
  <div>
    <el-dialog title="新增管理员" :visible.sync="dialogVisible1" width="50%" >
      <span style="font-size: 20px;">默认密码为:123456</span>
      <el-input v-model="addAccount.adminName" placeholder="请输入用户名"></el-input>
      <el-input v-model="addAccount.adminPhone" placeholder="绑定管理员手机号"></el-input>
      <el-input v-model="addAccount.realName" placeholder="请输入管理员姓名"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button @click="registAdmin">确定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="绑定角色" :visible.sync="dialogVisible2" width="30%" >
      <el-select v-model="role.roleId" placeholder="请选择">
          <el-option
            v-for="item in roles"
            :key="item.roleId"
            :label="item.roleName"
            :value="item.roleId">
          </el-option>
        </el-select>
      <span slot="footer" class="dialog-footer">
        <el-button @click="canelAccountRole">取 消</el-button>
        <el-button @click="bindingAdminRole">确定</el-button>
      </span>
    </el-dialog>

    <el-row>
      <el-col :span="3" :offset="14" style="font-size: 18px;text-align: center;">
       <span>手机/用户名</span>
      </el-col>
      <el-col :span="4">
        <el-input v-model="condition" placeholder="请输入内容"></el-input>
      </el-col>
      <el-col :span="2" style="margin-left: 10px;">
        <el-button type="primary" icon="el-icon-search" @click="findAccountByCondition">搜索</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="2" :offset="1">
        <el-button type="success" @click="addWindow">新增管理员账号</el-button>
      </el-col>
    </el-row>
  <el-table
      :data="page.records"
      style="width: 90%">
      <el-table-column
        prop="adminName"
        label="用户名"
        width="100">
      </el-table-column>
      <el-table-column
        prop="adminPhone"
        label="手机号"
        width="120">
      </el-table-column>
      <el-table-column
        prop="nickName"
        label="昵称"
        width="120">
      </el-table-column>
      <el-table-column
        prop="realName"
        label="真名"
        width="120">
      </el-table-column>
      <el-table-column
        prop="role"
        label="角色"
        width="100">
      </el-table-column>
      <el-table-column
        prop="adminWorkDate"
        label="入职时间"
        width="180">
      </el-table-column>
      <el-table-column
        prop="state"
        label="账号状态"
        width="80">
        <template slot-scope="scope">
          {{scope.row.state==0?"正常":"禁用"}}
        </template>
      </el-table-column>
      <el-table-column label="修改状态">
      <template v-slot="scope">
       <el-button type="success" v-if="scope.row.state==1" size="small" round @click="updateAdminAccountStateStart(scope.row.accountId)">启用</el-button>
        <el-button type="danger" v-if="scope.row.state==0" size="small" round @click="updateAdminAccountStateDown(scope.row.accountId)">禁用</el-button>
       </template>
      </el-table-column>
      <el-table-column label="绑定角色">
      <template v-slot="scope">
       <el-button type="text" v-if="scope.row.role=='未分配角色'" @click="findAllRole(scope.row.accountId)">查看</el-button>
       </template>
      </el-table-column>
    </el-table>
    <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 30]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total">
        </el-pagination>
      </div>
  </div>
</template>

<script>
  export default{
    name:"AdminAccount",
    data(){
      return{
      pageNum:1,//分页参数
      pageSize:10,//分页参数
      page:{},//分页查询返回值
      condition:"",//条件查询
      dialogVisible1:false,
      addAccount:{},//新增账号
      roles:[],//角色集合
      role:{},//绑定角色
      dialogVisible2:false
      }
    },
    methods:{
      /**
       * 取消账号角色绑定
       */
      canelAccountRole(){
        this.role={}
        this.dialogVisible2=false
      },
      /**
       * 绑定角色账号
       */
      bindingAdminRole(){
        this.$http.get("/admin/adminAccountRole/bindingAdminRole",{
          params:{
          accountId:this.role.accountId,
          roleId:this.role.roleId
          }
        }).then(resp=>{
          if(resp.data.code==200){
            this.$message({
                      message: '绑定角色成功',
                      type: 'success'
                    });
          }else{
             this.$message.error(resp.data.message);
          }
          this.role={}
          this.dialogVisible2=false
          this.loadAllAdminAccount()
        })
      },
      /**根据账号查找角色
       * @param {Object} accountId 账号Id
       */

      findAllRole(accountId){
        this.dialogVisible2=true
        this.role.accountId=accountId
      },
      /**
       * 加载所有角色
       */

      loadAllRole(){
        this.$http.get("admin/adminRole/loadAllRole").then(resp=>{
          this.roles=resp.data.data
        })
      },
      /**
       * 根据条件查找账号
       */
      findAccountByCondition(){
        this.$http.get("/admin/adminAccount/loadAllAdminAccount",{
          params:{
            pageNum:this.pageNum,
            pageSize:this.pageSize,
            condition:this.condition
          }
        }).then(resp=>{
          this.page=resp.data.data
        })
      },
      /**
       * 注册管理员账号
       */
      registAdmin(){
      this.$http.post("/admin/adminAccount/registAdmin",this.addAccount).then(resp=>{
        if(resp.data.code==200){
          this.$message({
                    message: '添加管理账号成功',
                    type: 'success'
                  });
        }else{
           this.$message.error(resp.data.message);
        }
        this.loadAllAdminAccount()
        this.dialogVisible1=false
        this.addAccount={}
      })
      },
      /**
       * 新增管理员窗口
       */
      addWindow(){
        this.dialogVisible1=true
      },
      /**分页查询
       * @param {Object} val
       */
      handleSizeChange(val) {
       this.pageSize=val
       this.loadAllAdminAccount()
      },
      /**分页查询
       * @param {Object} val
       */
      handleCurrentChange(val) {
       this.pageNum=val
       this.loadAllAdminAccount()
      },
      /**
       * 加载所有账号
       */
     loadAllAdminAccount(){
      this.$http.get("/admin/adminAccount/loadAllAdminAccount",{
        params:{
          pageNum:this.pageNum,
          pageSize:this.pageSize,
        }
      }).then(resp=>{
        this.page=resp.data.data
      })
     },
     /**启用账号状态
      * @param {Object} accountId
      */
     updateAdminAccountStateStart(accountId){
       this.$http.get("admin/adminAccount/updateAdminAccountState",{
         params:{
           accountId:accountId,
           state:0
         }
       }).then(resp=>{
         if(resp.data.code==200){
           this.$message({
                     message: '启用管理账号成功',
                     type: 'success'
                   });
         }else{
            this.$message.error(resp.data.message);
         }
         this.loadAllAdminAccount()
       })
     },
     /**禁用账号状态
      * @param {Object} accountId
      */
     updateAdminAccountStateDown(accountId){
       this.$http.get("admin/adminAccount/updateAdminAccountState",{
         params:{
           accountId:accountId,
           state:1
         }
       }).then(resp=>{
         if(resp.data.code==200){
           this.$message({
                     message: '禁用管理账号成功',
                     type: 'success'
                   });
         }else{
            this.$message.error(resp.data.message);
         }
         this.loadAllAdminAccount()
       })
     },
    },
    created(){
      this.loadAllAdminAccount()
      this.loadAllRole()
    }
  }
</script>

<style>
</style>
